<template>
   <div>
	<el-card style="width: 800px;">
		 <h3>走访信息</h3>
		 <el-form ref="formObj" :model="interview" label-width="120px" :rules="interviewRules">
		   <!-- 走访日期 -->
		   <el-form-item label="走访时间" prop="time">
			 <el-date-picker 
			 v-model="interview.time" 
			 type="date" 
			 placeholder="请选择日期"
			 value-format="YYYY-MM-DD"></el-date-picker>
		   </el-form-item>
		   
		   <!-- 风险类型 -->
		   <el-form-item label="风险类型">
			 <el-checkbox-group v-model="interview.riskType">
			   <el-checkbox label="1">人力风险</el-checkbox>
			   <el-checkbox label="2">物质风险</el-checkbox>
			   <el-checkbox label="3">自然风险</el-checkbox>
			   <el-checkbox label="4">金融风险</el-checkbox>
			   <el-checkbox label="5">社会风险</el-checkbox>
			 </el-checkbox-group>
		   </el-form-item>
		   
		   <!-- 风险备注 & 走访详情 -->
		   <div class="form-row">
			 <el-form-item class="form-item" label="风险备注">
			   <el-input v-model="interview.riskRemark" type="textarea" :rows="5" maxlength="250" placeholder="请输入风险备注"></el-input>
			 </el-form-item>
			 <el-form-item class="form-item" label="走访详情">
			   <el-input v-model="interview.detail" type="textarea" :rows="5" maxlength="250" placeholder="请输入交谈详情"></el-input>
			 </el-form-item>
		   </div>
		   
		   <!-- 年收入 & 负债 -->
		   <div class="form-row">
			 <el-form-item class="form-item" label="年收入" prop="income">
				 <el-input-number style="width: 250px;" v-model="interview.income"  :precision="2" :step="0.1" :max="1000000" :min="0" 
				 placeholder="请输入年收入金额(单位:元)"/>
			 </el-form-item>
			 <el-form-item class="form-item" label="负债" prop="liability">
				 <el-input-number style="width: 240px;" v-model="interview.liability"  :precision="2" :step="0.1" :max="1000000" :min="0"
				 placeholder="请输入负债金额(单位:元)"/>
			 </el-form-item>
		   </div>
		   
		   <div class="form-row">
			   <!-- 走访实况 -->
			   <el-form-item label="走访实况" prop="photo" class="form-item">
						<div style="width: 150px; height: 150px; overflow: hidden;">
						   <el-upload
						   list-type="picture-card"
						   :auto-upload="false"
						   action="#"
						   :limit="1"
						   :on-change="uploadFile"
						   :on-remove="removeFile"
						   v-model:file-list="fileList">
							<el-icon><PictureFilled /></el-icon>
						   </el-upload>
						</div>
			   </el-form-item>
			   
			   <el-form-item  label="建议与意见" class="form-item">
				 <el-input v-model="interview.suggestion" type="textarea" :rows="5" maxlength="250" placeholder="请输入建议与意见"></el-input>
			   </el-form-item>
			</div>
		 </el-form>
	</el-card>
	<div class="save">
		 <el-button style="margin-top: 10px;" type="success" @click="save" :icon="Save">提交</el-button>
	</div>
   </div>
</template>
  
<script setup>
import url from './util' 
import { ref ,onMounted ,watch ,reactive} from 'vue'
import Save from '@/components/icons/save' 
import { PictureFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { post, get } from '@/axios'
import { getPath } from '@/util';
import { userIdStore } from '@/stores'

const idStore = userIdStore()
const props = defineProps(['id','fId'])
const emits = defineEmits(['update:show','getInterviewData'])
const formObj = ref()
const interview = ref({
  id: null,
  vcId: idStore.userId,
  fId: props.fId,
  time: '',
  riskType: [],
  riskRemark: '',
  income: null,
  liability: null,
  suggestion: '',
  detail: '',
  photo: ''
})

// 默认上传文件
const fileList = reactive([])

const interviewRules = reactive({
	time: [
		{ required: true, message: '请输入走访时间', trigger: 'blur' }
	],
	riskType: [
		{ required: true, message: '请选择风险类型', trigger: 'blur'}
	],
	income: [
		{ required: true, message: '请输入年收入', trigger: 'blur' }
	],
	liability: [
		{ required: true, message: '请输入负债金额', trigger: 'blur' }
	],
	photo: [
		{ required: true, message: '请上传走访实况', trigger: 'blue'}
	]

})

function uploadFile ( file ) {
	console.dir(file)
	interview.value.photo = file.raw
}
function removeFile () {
	interview.value.photo = null
}

function save () {
	post(props.id ? url.update : url.add,interview.value,content => {
		emits('update:show',false)
		emits('getInterviewData')
	},formObj)
}

// update板块
if(props.id) {
	interview.value.id = props.id
	getById()
}
function getById () {
	get(url.getById,{ id: interview.value.id},content => {
		for (const key in interview.value) {
			if (Object.prototype.hasOwnProperty.call(content,key)) {
				// 检查是否是 riskType 字段
				if (key === 'riskType' && typeof content[key] === 'string') {
				  // 将逗号分割的字符串转换为数组
				  interview.value[key] = content[key].split(',');
				} else {
				  // 直接赋值
				  interview.value[key] = content[key];
				}
			}
		}
		fileList.push({url:getPath(content.photo)})
	})
}

</script>
  
<style scoped lang="scss">
.form-row {
  display: flex;
  gap: 20px; 
  margin-top: 10px;
  .form-item {
    flex: 1; 
  }
}
.save {
	display: flex;
	justify-content: center;
	align-items: center;
}

</style>